<template>
  <div class="Rule">
    <div class="con_box">
      <div class="container">
        <div class="title">答题规则</div>
        <div>
          <p>
            <span>1、</span> 答题规则答题规则答题规则答题规则
            答题规则答题规则答题规则答题规则
          </p>
          <p>
            <span>2、</span>答题规则答题规则答题规则答题规则
            答题规则答题规则答题规则答题规则
          </p>
          <p>
            <span>3、</span>答题规则答题规则答题规则答题规则
            答题规则答题规则答题规则答题规则
          </p>
          <p>
            <span>4、</span>答题规则答题规则答题规则答题规则
            答题规则答题规则答题规则答题规则
          </p>
        </div>
      </div>
      <div class="btn">
        <a href="javascript:;" @click="$router.push('/')">我已了解规则</a>
      </div>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
.Rule {
  background-image: url("../assets/image/rest_bg.png");
  background-repeat: no-repeat;
  width: 100%;
  background-size: cover;
  height: 100%;
  .con_box {
    padding-top: 1.25rem;
  }
  .container {
    background-color: #fff;
    border-radius: 0.4rem;
    width: 90%;
    margin: 0rem auto 0rem;
    padding: 2.1rem 1.4rem 2.7rem;
    .title {
      text-align: center;
      margin-bottom: 2.1rem;
      font-size: 1.25rem;
      color: #333333;
      font-weight: 600;
    }
    p {
      display: flex;
    }
    p:not(:last-child) {
      margin-bottom: 0.62rem;
    }
  }
  .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 7.8rem;
    a {
      width: 85%;
      height: 3.125rem;
      background-image: linear-gradient(180deg, #d42454 0%, #d42454 100%);
      border-radius: 0.3125rem;
      display: inline-block;
      color: #fff;
      font-size: 1.25rem;
      text-align: center;
      line-height: 3.125rem;
    }
  }
  @media (max-width: 320px) {
    .btn {
      margin-top: 3.8rem;
    }
  }
}
</style>
